import React, { useState, useEffect } from 'react';
import { useParams, history } from 'umi';
import { Button, Spin, message } from 'antd';
import { ArrowLeftOutlined } from '@ant-design/icons';
import { scriptApi } from '@/services/api';
import type { Script } from '@/types';
import ExecutionHistory from './ExecutionHistory';

const ExecutionHistoryPage: React.FC = () => {
  const { scriptId } = useParams<{ scriptId: string }>();
  const [script, setScript] = useState<Script | null>(null);
  const [loading, setLoading] = useState(true);

  const fetchScript = async () => {
    if (!scriptId) return;
    
    setLoading(true);
    try {
      const response = await scriptApi.getScriptById(parseInt(scriptId));
      setScript(response.data);
    } catch (error) {
      message.error('获取脚本信息失败');
      history.goBack();
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchScript();
  }, [scriptId]);

  if (loading) {
    return (
      <div style={{ textAlign: 'center', padding: '50px' }}>
        <Spin size="large" />
      </div>
    );
  }

  if (!script) {
    return null;
  }

  return (
    <div>
      <div style={{ marginBottom: 16 }}>
        <Button 
          icon={<ArrowLeftOutlined />} 
          onClick={() => history.back()}
        >
          返回脚本管理
        </Button>
      </div>
      <ExecutionHistory script={script} />
    </div>
  );
};

export default ExecutionHistoryPage;